/**
 *  *******************useEffect*******************
 * 
 *  在修改数据之后 把count值放到页面标题中
 *  1.导入useEffect函数
 *  2.在函数组件中执行 传入回调 并且定义副作用
 *  3.当我们通过修改状态更新组件时 副作用也会不断执行
 * 
 * 
 * *******************依赖项控制副作用的执行时机*********************
 * 
 *  1.默认状态(无依赖项)
 *    ------组件初始化的时候先执行一次 等到每次数据修改时组件更新再次执行
 *  2.添加一个空数组依赖项
 *    ------组件初始化的时候执行一次
 *  3.依赖特定项
 *    ------组件初始化时候执行一次 依赖的特定项发生变化时再次执行
 *  4.注意事项
 *    ------只要在useEffect回调函数中用到的数据状态就应该出现在依赖项数组中，否则可能会有bug
 *    ------某种意义上 hook的出现 就是想不用生命周期的概念也可以写业务代码
 * 
 */

import { useState, useEffect } from "react"
function App () {

  const [count, setCount] = useState(0)
  const [name, setName] = useState('')
  useEffect(() => {
    console.log('副作用又执行了')
    console.log(name)
    document.title = count
  }, [count, name])
  // 此时什么时候会执行副作用函数? 初始化 + count/name被修改时都会执行
  return (
    <div>
      <p>{count}</p>
      <p>name:{name}</p>
      <button onClick={() => setCount(count + 1)}>点击修改count</button>
      <button onClick={() => setName('hahah')}>点击修改name</button>
    </div>
  )
}
export default App
